// 创建一个动态item
function createPostItem(username, ctime, text, imgList, likeCount, commentCount) {
    let post = document.createElement('div');
    post.classList.add('post');

    // 动态头部
    let postHeader = document.createElement('div');
    postHeader.classList.add('post-header');
    // 发布者头像
    let userIcon = document.createElement('div');
    userIcon.classList.add('post-user-icon');
    // 发布者信息
    let userInfo = document.createElement('div');
    userInfo.classList.add('post-user-info');
    // 发布者
    let userNameDom = document.createElement('div');
    userNameDom.classList.add('username');
    userNameDom.innerText = username;
    // 发布时间
    let ctimeDom = document.createElement('div');
    ctimeDom.classList.add('ctime');
    ctimeDom.innerText = ctime;
    // 发布内容
    let postText = document.createElement('div');
    postText.classList.add('post-text');
    postText.innerText = text;
    // 发布图片列表
    let postImgList = document.createElement('div');
    postImgList.classList.add('post-img-list');
    for (let i = 0; i < imgList.length; i++) {
        let item = imgList[i];
        let imgDom = document.createElement('div');
        imgDom.classList.add('post-img');
        postImgList.appendChild(imgDom);
    }
    // 底部
    let bottom = document.createElement('div');
    bottom.classList.add('like-line');
    // 点赞
    let likeBox = document.createElement('div');
    likeBox.classList.add('like-box');
    let likeIcon = document.createElement('div');
    likeIcon.classList.add('like-icon');
    let likeCountDom = document.createElement('div');
    likeCountDom.classList.add('like-count');
    likeCountDom.innerText = likeCount;
    // 评论
    let commentBox = document.createElement('div');
    commentBox.classList.add('comment-box');
    let commentIcon = document.createElement('div');
    commentIcon.classList.add('comment-icon');
    let commentCountDom = document.createElement('div');
    commentCountDom.classList.add('comment-count');
    commentCountDom.innerText = commentCount;
    
    // 拼接DOM节点
    userInfo.appendChild(userNameDom);
    userInfo.appendChild(ctimeDom);
    postHeader.appendChild(userIcon);
    postHeader.appendChild(userInfo);
    likeBox.appendChild(likeIcon);
    likeBox.appendChild(likeCountDom);
    commentBox.appendChild(commentIcon);
    commentBox.appendChild(commentCountDom);
    bottom.appendChild(likeBox);
    bottom.appendChild(commentBox);
    post.appendChild(postHeader);
    post.appendChild(postText);
    post.appendChild(postImgList);
    post.appendChild(bottom);

    return post;
}

// 创建20个动态假数据
(function () {
    let postListDom = document.querySelector('.post-box');
    postListDom.innerHTML = '';
    for (let i = 0; i < 20; i++) {
        let username = '用户' + (i + 1);
        let ctime = '2024-11-12 10:04';
        let text = '这是第' + (i + 1) + '条动态\n考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！考研！！！';
        let imgList = ['/static/img/1.jpg', '/static/img/2.jpg', '/static/img/3.jpg'];
        let postItem = createPostItem(username, ctime, text, imgList, 500, 500);
        postListDom.appendChild(postItem);
    }
})();